<template>
  <div>
    <h1>茶叶月色！</h1>
    <h2>而不是茶颜悦色！</h2>
    <h3>{{ userID }}</h3>
  </div>
</template>

<script>
export default {
  name: "User",
  computed: {
    userID() {
      return this.$route.params.name;
    }
  },
  // beforeRouteEnter: (to, from, next) => {
  //   console.log('这是用户组件在进入之前的操作！！！');
  //   这里为什么可以调用this呢？按理来说因为还没有正式进入组件，应该是不能调用的
  //   注意，我们这里调用的this可能并不是组件的this，
  //   console.log(this.a.name);
  //   next(vm => {
  //     console.log(this.a.name);
  //   });
  // },
  // beforeRouteLeave: (to, from, next) => {
  //   console.log(this.a.name);
  //   const answer = window.confirm('Do you really want to leave? You have unsaved changes!');
  //   if (answer) {
  //     console.log('这是用户组件在离开时的操作！！！');
  //     next();
  //   } else {
  //     console.log('这是用户组件在未离开时的操作！！！');
  //     next(false);
  //   }
  // }
  created() {
    console.log('这是created被调用的现场！')
  },
  destroyed() {
    console.log('这是destroyed被调用的现场！')
  }

}
</script>

<style scoped>

</style>
